<template>
  <div class="app-container">
    <div class="mapDiv">
      <!--地图-->
      <IndexMap v-if="completeRefreshData==true"
                :allRadioIndexData="allRadioIndexData"
                :allListData="allListData"
                :typeCodeDataList="typeCodeDataList"
                :resetClearAllBool="resetClearAllBool"
                :dataTypeInfoArray="dataTypeInfoArray"
                :mapDrawType="mapDrawType"
                :allDrawGeomText="allDrawGeomText"
                :qXBool="qXBool"
                @getDetailDataById="getDetailDataById"
                @getLegendHtml="getLegendHtml"
                @getDownloadName="getDownloadName"
                @getAllDrawGeom="getAllDrawGeom"
                @openDrawQuery="openDrawQuery"
      ></IndexMap>
    </div>
    <div class="new-layerLegendDiv">
      <div>
        <!-- <el-card :body-style="{ padding: '20px 15px !important' }">
          <div class="operation-item" @click="openLayer">
            <div class="operation-item-icon">
              <svg-icon icon-class="menu"></svg-icon>
            </div>
            <span>图层</span>
          </div> -->
          <p @click="openLayer">
            <template v-if="showHideLayerDivBool==false">
              <img title="打开图层选择" src="@/assets/map/image/newImage/layer.png">
              <span style="color:#3a385e;">图层</span>
            </template>
            <template v-else>
              <img title="关闭图层选择" src="@/assets/map/image/newImage/layer-r.png">
              <span style="color:#107ce5;">图层</span>
            </template>
          </p>
          <p class="new-layerLengendDiv-split"></p>
          <p @click="openLegend">
            <template v-if="showHideLegendDivBoolMap==false">
              <img title="打开图例" src="@/assets/map/image/newImage/legend.png">
              <span style="color:#3a385e;">图例</span>
            </template>
            <template v-else>
              <img title="关闭图例" src="@/assets/map/image/newImage/legend-r.png">
              <span style="color:#107ce5;">图例</span>
            </template>
          </p>
          <!-- <div class="operation-item" @click="openDrawQuery">
            <div class="operation-item-icon">
              <svg-icon icon-class="suitcase"></svg-icon>
            </div>
            <span>圈选<br/>统计</span>
          </div>
          <div class="operation-item" @click="openLegend">
            <div class="operation-item-icon">
              <svg-icon icon-class="tag"></svg-icon>
            </div>
            <span>图例</span>
          </div> -->
        <!-- </el-card> -->
        <!-- 图层 -->
        <Layer v-model:isShow="isShowLayer" ref="layer" @getFormLists="getFormLists" />
      </div>
    </div>
    <!--圈选工具-->
    <div class="new-drawQueryDiv" v-show="isDrawQuery">
      <p @click="drawRectangle"><img src="@/assets/map/image/cfx-r.png" title="矩形"><br/><span>矩形</span></p>
      <p @click="drawPolygon"><img src="@/assets/map/image/dbx-r.png" title="多边形"><br/><span>多边形</span></p>
      <p @click="clearDrawQuery"><img src="@/assets/map/image/qux-r.png" title="清除"><br/><span>清除</span></p>
      <p @click="closeDrawQuery"><img src="@/assets/map/image/jshz-r.png" title="结束"><br/><span>结束</span></p>
    </div>

    <div id="indexMap-mapDiv" class="ol-popup" v-show="isShowLegend">
      <!--图层图例-->
      <div v-if="showHideLegendDivBool" class="layerMap-legend">
        <!--滚动条-->
        <el-scrollbar max-height="500px">
          <p>图例</p>
          <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
//地图
import IndexMap from '@/map/indexMap.vue';
import Layer from '@/views/quickMapping/common/layer/layer.vue'
import { iServerHttp } from "@/map/projMap.js"
import { ref } from 'vue';
// import { checkData } from '@/views/quickMapping/common/layer/layer'

const { proxy } = getCurrentInstance();

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
const allListData = ref([]);//地图显示数据列表
const typeCodeDataList = ref([]);//选择图层的版本号数据列表
const allRadioIndexData = ref([]);//全部序号列表
const resetClearAllBool = ref(false);//是否重置清空全部图层数组
//数据类型
const dataTypeInfoArray = ref([
  //地震活动断层探查数据中心--ArcGIS图层
  {database:"arcgis", name: '全新世断层', label: '全新世断层', radioLabel: 'hddcarcgis-0', code: 'hddcarcgis-0', table:"全新世断层",url:"",zIndex:7,fieldId:"",sqlFilter:"全新世断层",show:false},
  {database:"arcgis", name: '晚更新世断层', label: '晚更新世断层', radioLabel: 'hddcarcgis-1', code: 'hddcarcgis-1', table:"晚更新世断层",url:"",zIndex:7,fieldId:"",sqlFilter:"晚更新世断层",show:false},
  {database:"arcgis", name: '早中更新世断层', label: '早中更新世断层', radioLabel: 'hddcarcgis-2', code: 'hddcarcgis-2', table:"早中更新世断层",url:"",zIndex:7,fieldId:"",sqlFilter:"早中更新世断层",show:false},
  {database:"arcgis", name: '前第四纪断层', label: '前第四纪断层', radioLabel: 'hddcarcgis-3', code: 'hddcarcgis-3', table:"前第四纪断层",url:"",zIndex:7,fieldId:"",sqlFilter:"前第四纪断层",show:false},
  ////////////////////////基础数据系统
  //1970年以来地震目录
  {database:"datacenter", name: '1970年以来地震目录（4.7<=M<5）', label: '4.7<=M<5', radioLabel: '1970nylxzml-0', code: '1970nylxzml-0', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=4.7 and magnitude<5",show:false},
  {database:"datacenter", name: '1970年以来地震目录（5<=M<6）', label: '5<=M<6', radioLabel: '1970nylxzml-1', code: '1970nylxzml-1', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=5 and magnitude<6",show:false},
  {database:"datacenter", name: '1970年以来地震目录（6<=M<7）', label: '6<=M<7', radioLabel: '1970nylxzml-2', code: '1970nylxzml-2', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=6 and magnitude<7",show:false},
  {database:"datacenter", name: '1970年以来地震目录（7<=M<8）', label: '7<=M<8', radioLabel: '1970nylxzml-3', code: '1970nylxzml-3', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=7 and magnitude<8",show:false},
  {database:"datacenter", name: '1970年以来地震目录（8<=M<9）', label: '8<=M<9', radioLabel: '1970nylxzml-4', code: '1970nylxzml-4', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=8 and magnitude<9",show:false},
  {database:"datacenter", name: '1970年以来地震目录（4.7<=M<5）', label: '4.7<=M<5', radioLabel: '1970nylxzml-0', code: '1970nylxzml-0', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=4.7 and magnitude<5 and del_flag='0'",show:false},
  {database:"datacenter", name: '1970年以来地震目录（5<=M<6）', label: '5<=M<6', radioLabel: '1970nylxzml-1', code: '1970nylxzml-1', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=5 and magnitude<6 and del_flag='0'",show:false},
  {database:"datacenter", name: '1970年以来地震目录（6<=M<7）', label: '6<=M<7', radioLabel: '1970nylxzml-2', code: '1970nylxzml-2', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=6 and magnitude<7 and del_flag='0'",show:false},
  {database:"datacenter", name: '1970年以来地震目录（7<=M<8）', label: '7<=M<8', radioLabel: '1970nylxzml-3', code: '1970nylxzml-3', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=7 and magnitude<8 and del_flag='0'",show:false},
  {database:"datacenter", name: '1970年以来地震目录（8<=M<9）', label: '8<=M<9', radioLabel: '1970nylxzml-4', code: '1970nylxzml-4', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=8 and magnitude<9 and del_flag='0'",show:false},
  //1970年前4 3_4以上地震目录
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（4.7<=M<5）', label: '4.7<=M<5', radioLabel: 'ls434ysqzml-0', code: 'ls434ysqzml-0', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=4.7 and magnitude<5",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（5<=M<6）', label: '5<=M<6', radioLabel: 'ls434ysqzml-1', code: 'ls434ysqzml-1', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=5 and magnitude<6",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（6<=M<7）', label: '6<=M<7', radioLabel: 'ls434ysqzml-2', code: 'ls434ysqzml-2', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=6 and magnitude<7",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（7<=M<8）', label: '7<=M<8', radioLabel: 'ls434ysqzml-3', code: 'ls434ysqzml-3', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=7 and magnitude<8",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（8<=M<9）', label: '8<=M<9', radioLabel: 'ls434ysqzml-4', code: 'ls434ysqzml-4', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=8 and magnitude<9",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（4.7<=M<5）', label: '4.7<=M<5', radioLabel: 'ls434ysqzml-0', code: 'ls434ysqzml-0', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=4.7 and magnitude<5 and del_flag='0'",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（5<=M<6）', label: '5<=M<6', radioLabel: 'ls434ysqzml-1', code: 'ls434ysqzml-1', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=5 and magnitude<6 and del_flag='0'",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（6<=M<7）', label: '6<=M<7', radioLabel: 'ls434ysqzml-2', code: 'ls434ysqzml-2', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=6 and magnitude<7 and del_flag='0'",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（7<=M<8）', label: '7<=M<8', radioLabel: 'ls434ysqzml-3', code: 'ls434ysqzml-3', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=7 and magnitude<8 and del_flag='0'",show:false},
  {database:"datacenter", name: '1970年前4 3_4以上地震目录（8<=M<9）', label: '8<=M<9', radioLabel: 'ls434ysqzml-4', code: 'ls434ysqzml-4', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=8 and magnitude<9 and del_flag='0'",show:false},
]);
const showHideLegendDivBool = ref(false);//是否显示图例
const layerShowHideArray = ref([]);//图层是否显示数组
const showHideLayerDivBool = ref(false)
const showHideLegendDivBoolMap = ref(false)
//图例
const getLegendHtml = (obj)=>{
  //图层显示隐藏数组
  //alert(obj.name);
  let showHideArray = layerShowHideArray.value;
  if(obj!=null){
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].name==obj.name){
        console.log(obj.name);
        showHideArray[i].show = obj.show;
        showHideArray[i].legendHtml = obj.legendHtml;//显示图例
        break;
      }
    }
    //是否显示图例
    let bool = false;
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].show){
        bool = true;
        break;
      }
    }
    showHideLegendDivBool.value = bool;
  }else{//清空图例
    //是否显示图例
    for(let i=0;i<showHideArray.length;i++){
      showHideArray[i].show = false;
    }
    showHideLegendDivBool.value = false;
  }
}

//显示Arcgis服务活动断层图例
function showArcgisHddcLegend(){
  debugger;
  let array = dataTypeInfoArray.value;
  let hddcArray = [];
  for(let i=0;i<array.length;i++){
    if(array[i].database=="arcgis" && array[i].show==true){
      hddcArray.push(array[i]);
    }
  }
  if(hddcArray.length>0){
    for(let i=0;i<hddcArray.length;i++){
      let label = hddcArray[i].label;
      let color = "#fff";
      if(label=="全新世断层"){
        color = "#ff2525";
      }else if(label=="晚更新世断层"){
        color = "#c922ff";
      }else if(label=="早中更新世断层"){
        color = "#5ab53c";
      }else if(label=="前第四纪断层"){
        color = "#2d2d2d";
      }
      let html = "";
      if(i==0){
        html += '<p style="text-align: center;font-weight: bold;">活动断层</p>';
      }
      //显示已展示活动断层图层的图例
      html += '<p style="height: 16px;">';
      html += '<span style="width: 40px;height: 5px;margin-top: 6px;background: '+color+';display: inline-block; "></span>';
      html += '<span style="position: relative;top: -2px;left: 20px;height: 16px;font-size: 16px;">'+label+'</span>';
      html += '</p>';
      //图例html
      getLegendHtml({name:label,legendHtml:html,show:true});
    }
  }
}

//根据ID查询数据属性表
const getDetailDataById = (temp)=>{

}
//下载文件
const getDownloadName = (name)=>{
  importTemplate(name);
}
/*地图传参end*/

//设置图例数组
function setLayerShowHideArray(){
  let showHideArray = [];
  let dataTypeArray = dataTypeInfoArray.value;
  for(let i=0;i<dataTypeArray.length;i++){
    let item = dataTypeArray[i];
    showHideArray.push({ code: item.code, name: item.name, show:false,legendHtml:"" });
  }
  layerShowHideArray.value = showHideArray;
}

//初始化设置全部超图图层所需数据
function initAllLayerDataArray(){
  let typeCodeDataArray = [];
  let allRadioIndexArray = [];
  let childrenData = [];
  let list = dataTypeInfoArray.value;
  if(list!=null && list.length>0){
    for(let i=0;i<list.length;i++){
      let data = list[i];
      childrenData.push({
        name: data.name,
        radioLabel: data.code,
        dictItemCode: data.code,
        spaceBool:true,//是否空间数据
      });
      //选择图层的版本号数据列表
      typeCodeDataArray.push({
        name: data.name,
        radioLabel: data.code,
        dictItemCode: data.code,
        spaceBool:true,//是否空间数据
        typeCodeSelectData:[],
        sqlFilter:data.sqlFilter,//sql过滤条件
      });
      //全部序号列表
      allRadioIndexArray.push(data.code);
    }
  }
  //选择图层的版本号数据列表
  typeCodeDataList.value = typeCodeDataArray;
  //全部序号列表
  allRadioIndexData.value = allRadioIndexArray;
}

//下载文件
function importTemplate(name) {
  proxy.download("/base/product/downloadExcel", {
    fileName:name
  }, name);
}

const isShowLayer = ref(false);
//显示隐藏图层
const openLayer = () => {
  showHideLayerDivBool.value = !showHideLayerDivBool.value
  isShowLayer.value = !isShowLayer.value
}
const isDrawQuery = ref(false);
//圈选统计
const openDrawQuery = (flag) => {
  qXBool.value = false
  if(flag){
    isDrawQuery.value = true
  }else{
    isDrawQuery.value = false
  }
}
const isShowLegend = ref(false);
//显示隐藏图例
const openLegend = () => {
  showHideLegendDivBoolMap.value = !showHideLegendDivBoolMap.value
  isShowLegend.value = !isShowLegend.value;
}
//获取勾选图层列表
const getFormLists = (selectList) => {
  console.log("获取勾选图层列表");
  console.log(selectList);
  //根据勾选图层列表显示隐藏图层
  showHideLayer(selectList);
  //显示Arcgis服务活动断层图例
  showArcgisHddcLegend();
}

//根据勾选图层列表显示隐藏图层
function showHideLayer(selectList){
  console.log("selectList");
  console.log(selectList);
  let list = dataTypeInfoArray.value;
  for(let i=0;i<list.length;i++){
    let code = list[i].code;
    let bool = false;
    for(let j=0;j<selectList.length;j++){
      let selectCode = selectList[j].code + "-" + selectList[j].dictCode;
      if(selectCode==code){
        bool = true;
        break;
      }else if(selectList[j].code=="hddcarcgis" && code=="hddcarcgis"){//活动断层
        bool = true;
        break;
      }
    }
    list[i].show = bool;//是否显示图层
  }
  dataTypeInfoArray.value = list;
  console.log(list);
  //根据数据类别code、版本号查询图层
  getLayerByVersionDataType(0);
}

//根据三级数据类别获取版本数据
const getLayerInfoByDictItemCode = (dictItemCode) => {
  let data = null;
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++){
    if(datalist[i].dictItemCode==dictItemCode){
      data = datalist[i];
      break;
    }
  }
  return data;
}

//设置图层选择的版本号列表（添加、移除）并查询图层数据
function setActiveTypeCodeList(versionCode,typeCode,showBool){
  //根据三级数据类别获取版本数据
  let data = getLayerInfoByDictItemCode(typeCode);
  if(data!=null && versionCode){
    let typeCodeSelectArray = data.typeCodeSelectData;
    let bool = null;//是否添加版本号
    //添加、移除版本号
    if (!typeCodeSelectArray.includes(versionCode)) {
      if(showBool){
        typeCodeSelectArray.push(versionCode);//添加
        bool = true;
      }
    } else {
      typeCodeSelectArray.forEach((id, index) => {
        if (id === versionCode) {
          if(showBool==false){
            typeCodeSelectArray.splice(index, 1);//移除
            bool = false;
          }
        }
      });
    }
    //设置图层对应的选择版本号列表
    data.typeCodeSelectData = typeCodeSelectArray;
    resetClearAllBool.value = false;//是否重置清空全部图层数组
    //空间数据
    if(showBool && bool){//添加版本号
      //根据图层类型查询图层版本号数据
      allListData.value = [typeCode,versionCode,[],true,null];
      return true;
    }else if(showBool==false && bool==false){//移除版本号
      allListData.value = [typeCode,versionCode,[],false,null];
      return true;
    }
  }
  return false;
}

//根据数据类别code、版本号查询图层
function getLayerByVersionDataType(i){
  let list = dataTypeInfoArray.value;
  if(i<list.length){
    let typeCode = list[i].code;//数据类别三级code
    let versionCode = "全部";//版本号："全部"则展示整个图层，null无版本号不展示
    let showBool = list[i].show;//是否显示
    //设置图层选择的版本号列表（添加、移除）并查询图层数据
    //alert(typeCode)
    let returnBool = setActiveTypeCodeList(versionCode,typeCode,showBool);
    //alert(returnBool)
    if((i+1)<list.length){
      if(returnBool){
        console.log(typeCode+"--returnBool"+returnBool);
        setTimeout(function(){
          //根据数据类别code、版本号查询图层
          getLayerByVersionDataType(i+1);
        },1000);
      }else{
        //根据数据类别code、版本号查询图层
        getLayerByVersionDataType(i+1);
      }
    }
  }
}

const mapDrawType = ref("");//是否开启地图圈选查询类型（StopDraw关闭地图圈选 Polygon多边形绘制 Rectangle矩形绘制 Clear清空）
//圈选工具--绘制矩形
function drawRectangle(){
  mapDrawType.value = "Rectangle";
}
//圈选工具--绘制多边形
function drawPolygon(){
  mapDrawType.value = "Polygon";
}
//圈选工具--清空
function clearDrawQuery(){
  mapDrawType.value = "Clear";
}
const qXBool = ref(false)
//圈选工具--结束
function closeDrawQuery(){
  isDrawQuery.value = false;
  mapDrawType.value = "Clear";
  qXBool.value = true
}
//全部地图绘制空间数据
const allDrawGeomText = ref("");
//获取全部地图绘制结果
const getAllDrawGeom = (list) =>{
  console.log("获取全部地图绘制结果");
  console.log(list);
  if(list && list.length>0){
    allDrawGeomText.value = list[0];//全部地图绘制空间数据
  }
  mapDrawType.value = "StopDraw";
}

onMounted(() => {
  setLayerShowHideArray();//设置图例数组
  initAllLayerDataArray();//初始化设置全部超图图层所需数据
  //显示地图模块
  completeRefreshData.value = true;
});


</script>

<style scoped lang="scss">
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

//图例
.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}

.operation-panel-right {
  position: absolute;
  top: 16px;
  z-index: 9;
  font-weight: bold;
  right: 16px;

  .el-card {
    .operation-item {
      text-align: center;
      cursor: pointer;

      &>.operation-item-icon {
        transform: scale(1.2);
        margin: 0 0 5px 0;
        &:hover, &:active{
          color: var(--el-color-primary);;
        }
      }

      &:not(:last-child) {
        margin-bottom: 20px;
      }
    }
  }
}

.ol-attribution {
  display:none;
}

.new-drawQueryDiv {
  position:absolute;
  top:245px;
  left:100px;
  background:#fff;
  border:1px solid lightgray;

  p{
    text-align: center;
    padding: 5px;
    margin: 5px;
    cursor:pointer;

    img {
      width:20px;
    }

    span {
      font-size:16px;
    }
  }
}
.new-layerLengendDiv-split {
  width: 32px!important;
  height: 1px!important;
  padding: 0px!important;
  margin: 0px!important;
  margin-left: 10px!important;
  border-top: 1px dashed #6f7ea8;
}
/*图层图例*/
.new-layerLegendDiv {
  position: absolute;
  top:20px;
  right:10px;
  width: 54px;
  /*height: 220px;*/
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
  cursor:pointer;
}
.new-layerLegendDiv p {
  padding: 10px;
  margin:0px;
}
.new-layerLegendDiv p img {
  width:25px;
  height:25px;
  margin-left: 3px;
}
.new-layerLegendDiv p span {
  width:32px;
  height:21px;
  font-size: 14px;
  color:#3a385e;
  text-align:center;
  line-height:24px;
  border:0.5px solid #f5f5f5;
}
</style>
